<!--
  盛付通： 【签约开通】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <a-tabs v-model:activeKey="vdata.activeKey" @change="changeTabs">
    <a-tab-pane key="sign" tab="合同签约" forceRender>
      <div v-if="vdata.state == '6'" class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
        <a-form
                :model="vdata.applyData"
                style="padding-bottom: 30px;"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 12 }"
                :rules="vdata.rules"
        >
          <div v-if="vdata.applyData.merchantType != '1'">
            <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">执照信息</a-divider></a-col>
            <a-form-item label="营业执照照片" name="licenseImg">
              <JeepayUpload v-model:src="vdata.applyData.licenseImg" bizType="applyment" />

              <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
                <span v-if="item.picType=='A001'" class="jeepay-tip-text">{{ item.note }}</span>
              </div>
            </a-form-item>
          </div>

          <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">法人信息</a-divider></a-col>
          <a-form-item label="法人身份证人像面照片" name="idcard1Img">
            <JeepayUpload v-model:src="vdata.applyData.idcard1Img" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A002'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
            <JeepayUpload v-model:src="vdata.applyData.idcard2Img" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A003'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-form-item label="手持证件照片" name="idcardInHandImg">
            <JeepayUpload v-model:src="vdata.applyData.idcardInHandImg" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A009'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">商户信息</a-divider></a-col>
          <a-form-item label="门头照" name="storeOuterImg">
            <JeepayUpload v-model:src="vdata.applyData.storeOuterImg" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A006'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-form-item label="店内环境照" name="storeInnerImg">
            <JeepayUpload v-model:src="vdata.applyData.storeInnerImg" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A007'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-form-item label="收银台照" name="storeCashierImg">
            <JeepayUpload v-model:src="vdata.applyData.storeCashierImg" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A008'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>

          <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">结算信息</a-divider></a-col>

          <div v-if="vdata.applyData.settAccountType != 'C' && vdata.applyData.merchantType != 1">
            <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">
              <JeepayUpload v-model:src="vdata.applyData.companyAccountLicenseImg" bizType="applyment" />
              <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
                <span v-if="item.picType=='A011'" class="jeepay-tip-text">{{ item.note }}</span>
              </div>
            </a-form-item>
          </div>
          <div v-else>
            <a-form-item label="结算银行卡正面照片" name="settAccountLicenseImg">
              <JeepayUpload v-model:src="vdata.applyData.settAccountLicenseImg" bizType="applyment" />
              <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
                <span v-if="item.picType=='A004'" class="jeepay-tip-text">{{ item.note }}</span>
              </div>
            </a-form-item>

            <a-form-item label="结算银行卡反面照片" name="settAccountBankImg2">
              <JeepayUpload v-model:src="vdata.applyData.settAccountBankImg2" bizType="applyment" />
              <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
                <span v-if="item.picType=='A005'" class="jeepay-tip-text">{{ item.note }}</span>
              </div>
            </a-form-item>
          </div>

          <div v-if="vdata.applyData.isUncrpSett == 'Y'">
            <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
              <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard1Img" bizType="applyment" />
            </a-form-item>

            <a-form-item label="结算人身份证国徽面照片" name="settAccountIdcard2Img">
              <JeepayUpload v-model:src="vdata.applyData.settAccountIdcard2Img" bizType="applyment" />
            </a-form-item>

            <a-form-item label="结算授权书" name="settleAuthLetterPhoto">
              <JeepayUpload v-model:src="vdata.applyData.settleAuthLetterPhoto" bizType="applyment" />
              <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
            </a-form-item>

            <a-form-item label="法人手持结算授权书" name="settleAuthLetterHandlePhoto">
              <JeepayUpload v-model:src="vdata.applyData.settleAuthLetterHandlePhoto" bizType="applyment" />
            </a-form-item>
          </div>

          <div v-if="vdata.applyData.isOtherAccountInfo == '1'">
            <a-form-item label="备用结算账户正面照" name="standByStlAccCardImg">
              <JeepayUpload v-model:src="vdata.applyData.standByStlAccCardImg" bizType="applyment" :imgSize="2" ocrType="bankCard" />
              <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
            </a-form-item>
          </div>


          <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">其他信息</a-divider></a-col>
          <a-form-item label="收单协议盖章页照片" name="acquiringAgreementPhoto">
            <JeepayUpload v-model:src="vdata.applyData.acquiringAgreementPhoto" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='A010'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>
          <a-form-item label="其他材料照片" name="other1">
            <JeepayUpload v-model:src="vdata.applyData.other1" bizType="applyment" />
            <div v-for="(item, config) in vdata.imgUploadArr" :key="config" :span="8" :offset="1">
              <span v-if="item.picType=='B008'" class="jeepay-tip-text">{{ item.note }}</span>
            </div>
          </a-form-item>
        </a-form>
        <div class="drawer-btn-center">
          <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit">①上传资料<upload-outlined /></a-button>
          &nbsp;&nbsp;
          <a-button type="primary" :loading="vdata.btnLoading" @click="onConfirm">②资料确认<check-outlined /></a-button>
        </div>
      </div>
      <div v-if="vdata.state == '2' || vdata.state == '5'">
        <!-- <a-tabs @change="selectTabs">
      <a-tab-pane v-if="configMode != 'mchApplyment'" key="payWayRateConfig" tab="费率配置">
        <a-form ref="infoFormModel" layout="vertical">
          <JeepayPaywayRatePanel
            ref="jeepayPaywayRatePanelRef"
            :configMode="configMode"
            :infoId="vdata.recordId + '_' + vdata.mchNo"
            :selectIfCode="vdata.ifCode"
            onlyRate="true"
          />
        </a-form>
        <div class="drawer-btn-center jeepay-m-drawer">
          <a-button class="jeepay-m-btn" data-type="block" type="primary" :loading="vdata.btnLoading" @click="payConfAddFunc"><check-outlined />费率配置</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane v-else key="payWayRateConfigOther" tab="费率配置">
        <a-alert
          message="请联系运营人员进行配置后再进行签约操作"
          description=""
          type="warning"
          show-icon
        />
      </a-tab-pane>
      <a-tab-pane key="signConfig" tab="电子合同签约">
        <NextBizsCommonPage ref="nextBizsCommonPage" />
      </a-tab-pane>
    </a-tabs> -->

        <a-row>
          <a-col :offset="1">
            <a-form ref="infoFormModel" layout="vertical">
              <JeepayPaywayRatePanel
                      ref="jeepayPaywayRatePanelRef"
                      :configMode="configMode"
                      :infoId="vdata.recordId + '_' + vdata.mchNo"
                      :selectIfCode="vdata.ifCode"
                      onlyRate="true"
              />
            </a-form>
          </a-col>
        </a-row>
        <a-row>
          <a-col v-if="!vdata.signResult || vdata.signResult.state=='签约失败'" :offset="1">
            <a-button
                    class="jeepay-m-btn"
                    data-type="text"
                    :loading="vdata.btnLoading"
                    style="margin-left: 20px;"
                    type="primary"
                    @click="signApplyFunc"
            >
              <upload-outlined />发起签约
            </a-button>
          </a-col>
          <a-col v-if="vdata.signResult">
            <a-button
                    v-if="vdata.signResult.state=='待审核' || vdata.signResult.state=='签约中'"
                    class="jeepay-m-btn"
                    data-type="text"
                    :loading="vdata.btnLoading"
                    style="margin-left: 20px;"
                    type="primary"
                    @click="signQueryFunc"
            >
              <reload-outlined />签约结果查询
            </a-button>
          </a-col>
          <a-col v-if="vdata.signResult">
            <a-button
                    v-if="vdata.signResult.state=='待审核' || vdata.signResult.state=='签约中'"
                    class="jeepay-m-btn"
                    data-type="text"
                    :loading="vdata.btnLoading"
                    style="margin-left: 20px;"
                    type="primary"
                    @click="signSendAgainFunc"
            >
              <message-outlined />重发签约通知
            </a-button>
          </a-col>
        </a-row>
        <a-row v-if="vdata.signResult" style="padding-top: 20px;">
          <a-col :offset="1">
            <a-descriptions bordered :column="3" size="middle">
              <a-descriptions-item label="签约码" :span="3"><QrcodeVue :value="vdata.signResult.signUrl" :size="250" class="qrcode" /></a-descriptions-item>
              <a-descriptions-item label="签约地址" :span="3">
                {{ vdata.signResult.signUrl }}
                <a-button v-clipboard:copy="vdata.signResult.signUrl" v-clipboard:success="() => $infoBox.message.success('复制成功')" type="link">复制</a-button>
              </a-descriptions-item>
              <a-descriptions-item label="签约状态" :span="3">{{ vdata.signResult.state }}</a-descriptions-item>
              <a-descriptions-item v-if="vdata.signResult.state=='签约失败'" label="异常信息" :span="3">{{ vdata.signResult.errInfo }}</a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-row />
      </div>
      <div v-if="vdata.state == '1'">
        <a-result title="暂无更多操作">
          <template #icon>
            <smile-twoTone />
          </template>
        </a-result>
      </div>
    </a-tab-pane>

    <a-tab-pane key="auth" tab="实名认证" forceRender>
      <NextBizsCommonPage ref="nextBizsCommonPage" :showBizSignInfo="false" />
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>

  import { ref, nextTick } from 'vue'
  import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
  import ruleGenerator from '@/utils/ruleGenerator'
  import { API_URL_MCH_APPLYMENT_LIST, req, $ysPayRateConfig, $yspayUpload, $ysSignApply, $ysSignQuery, $yspayConfirm, $ysSignSendAgain } from '@/api/manage'
  import { getCurrentInstance, reactive, inject } from 'vue'
  import QrcodeVue from 'qrcode.vue'

  const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

  const jeepayPaywayRatePanelRef = ref()
  const nextBizsCommonPage = ref()
  let configMode : any = inject('configMode')

  const vdata : any = reactive({
    btnLoading: false,
    activeKey: 'sign',
    state: '',
    recordId: null, // 更新对象ID
    applyData: {} as any, // 进件资料对象
    visible: false, // 是否显示弹层/抽屉
    signResult: null, // 合同签约对象
    isSign: false, // 是否已签署电子协议
    rules: {
      licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
      idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
      idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
      storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
      storeInnerImg: [ ruleGenerator.requiredUpload('内景照') ],
      storeCashierImg: [ ruleGenerator.requiredUpload('收银台照') ],
      settAccountLicenseImg: [ ruleGenerator.requiredUpload('结算银行卡正面照片') ],
      settAccountBankImg2: [ ruleGenerator.requiredUpload('结算银行卡反面照片') ],
      companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
      settAccountIdcard1Img: [ ruleGenerator.requiredUpload('入账账户身份证人像面照片') ],
      settAccountIdcard2Img: [ ruleGenerator.requiredUpload('入账账户身份证国徽面照片') ],
      settleAuthLetterPhoto: [ ruleGenerator.requiredUpload('结算授权证书照片') ],
    },
    imgUploadArr: [], // 图片上传结果
  })

  function onSubmit() {
    vdata.btnLoading = true

    $yspayUpload(vdata.recordId, vdata.applyData).then((res) => {
      if(res) {
        vdata.imgUploadArr = JSON.parse(res)
      }

      $infoBox.message.success('操作成功')
      vdata.btnLoading = false
      vdata.visible = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  }
  function onConfirm() {
    vdata.btnLoading = true

    $yspayConfirm(vdata.recordId, vdata.applyData).then((res) => {
      if (res) {
        $infoBox.message.err(res)
      }else {
        $infoBox.message.success('操作成功')
      }
      vdata.btnLoading = false
      vdata.visible = false
    }).catch(() => {
      vdata.btnLoading = false
    })

  }

  function payConfAddFunc(){

// 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
    if (!paywayFeeList) {
      return
    }

    $ysPayRateConfig(vdata.recordId, { paywayFeeList: paywayFeeList }).then((res) => {
      vdata.result = res
      $infoBox.message.success('已发起配置')
    })
  }

  function changeTabs (key) { // 清空必填提示
    if (key) {
      vdata.groupKey = key
    }
    if(key == 'auth') {
      nextTick(() => {
        nextBizsCommonPage.value.pageRender(vdata.recordId) // 直接调用通用组件
      })
    }
  }

  // 对外暴露的 页面渲染函数  也用作初始化
  function pageRender (applyId){
    vdata.signResult = null

    req.getById(API_URL_MCH_APPLYMENT_LIST, applyId, { originData: '1' }).then( (res) => {
      // 图片上传结果置空
      vdata.imgUploadArr = []

      vdata.applyData = JSON.parse(res.applyDetailInfo)
      // 状态
      vdata.state = res.state
      // 单号
      vdata.recordId = applyId
      // 类型
      vdata.ifCode = res.ifCode
      // 商户号
      vdata.mchNo = res.mchNo
      // 渠道信息1
      vdata.result = res.channelVar1

      // 签约信息
      if (res.channelVar2) {
        vdata.signResult = JSON.parse(res.channelVar2)

        signQueryFunc()
      }

      vdata.visible = true
    })
  }


  // 签约申请
  function signApplyFunc(){
    vdata.btnLoading = true

    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
    if (!paywayFeeList) {
      return
    }

    $ysSignApply(vdata.recordId, { paywayFeeList: paywayFeeList }).then(res => {
      if (res) {
        vdata.signResult = JSON.parse(res)
      }
    }).finally(() => {
      vdata.btnLoading = false
    })
  }

  // 签约结果查询
  function signQueryFunc(){
    vdata.btnLoading = true
    $ysSignQuery(vdata.recordId).then(res => {
      vdata.signResult = JSON.parse(res)
      console.log(vdata.signResult)
    }).finally(() => {
      vdata.btnLoading = false
    })
  }

  // 签约重发
  function signSendAgainFunc(){
    vdata.btnLoading = true
    $ysSignSendAgain(vdata.recordId).then(res => {
      vdata.signResult = JSON.parse(res)
      console.log(vdata.signResult)
    }).finally(() => {
      vdata.btnLoading = false
    })
  }

  defineExpose({ pageRender })
</script>
